﻿<UserControl 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing" 
    x:Class="Wilke.Interactive.Drone.PlayGround.Radar"
	x:Name="UserControl" mc:Ignorable="d" RenderTransformOrigin="0.5,0.5"
    xmlns:local="clr-namespace:Wilke.Interactive.Drone.PlayGround" 
    HorizontalContentAlignment="Center" 
    HorizontalAlignment="Center" 
    VerticalAlignment="Center" >
    <UserControl.Resources>
        <Style x:Key="ImageButton" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid>
                            <Ellipse StrokeThickness="0.2">
                                <Ellipse.Stroke>
                                    <LinearGradientBrush EndPoint="-0.105,-0.15" MappingMode="RelativeToBoundingBox" StartPoint="1.048,1.101">
                                        <GradientStop Color="Black" Offset="0.016"/>
                                        <GradientStop Color="White" Offset="0.996"/>
                                    </LinearGradientBrush>
                                </Ellipse.Stroke>
                                <Ellipse.Fill>
                                    <RadialGradientBrush GradientOrigin="0.326,0.263" Center="0.495,0.488">
                                        <GradientStop Color="Black" Offset="1"/>
                                        <GradientStop Color="White"/>
                                    </RadialGradientBrush>
                                </Ellipse.Fill>
                            </Ellipse>
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <RadialGradientBrush x:Key="Orange_BACKGROUND" GradientOrigin="0.5,0.5">
            <RadialGradientBrush.RelativeTransform>
                <TransformGroup>
                    <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="0.865" ScaleY="0.805"/>
                    <SkewTransform AngleX="0" AngleY="0" CenterX="0.5" CenterY="0.5"/>
                    <RotateTransform Angle="135.194" CenterX="0.5" CenterY="0.5"/>
                    <TranslateTransform X="0.006" Y="0.124"/>
                </TransformGroup>
            </RadialGradientBrush.RelativeTransform>
            <GradientStop Color="#FF1ACB78" Offset="1"/>
            <GradientStop Color="#FFF9FF00" Offset="0"/>
        </RadialGradientBrush>
        <Style x:Key="ButtonStyle1" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse1" Storyboard.TargetProperty="(UIElement.Opacity)">
                                                <EasingDoubleKeyFrame KeyTime="00:00:00.2000000" Value="0.1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(Shape.StrokeThickness)">
                                                <EasingDoubleKeyFrame KeyTime="00:00:00.1000000" Value="2"/>
                                            </DoubleAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse1" Storyboard.TargetProperty="(FrameworkElement.Margin)">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00.1000000">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Thickness>2,2,3,4</Thickness>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse1" Storyboard.TargetProperty="(UIElement.Opacity)">
                                                <EasingDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ellipse1" Storyboard.TargetProperty="(UIElement.Opacity)">
                                                <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                                            </DoubleAnimationUsingKeyFrames>

                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(Shape.StrokeThickness)">
                                                <EasingDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0"/>
                                            </DoubleAnimationUsingKeyFrames>

                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused"/>
                                    <VisualState x:Name="Unfocused"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="0.08*"/>
                                <RowDefinition Height="0.84*"/>
                                <RowDefinition Height="0.08*"/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="0.08*"/>
                                <ColumnDefinition Width="0.84*"/>
                                <ColumnDefinition Width="0.08*"/>
                            </Grid.ColumnDefinitions>
                            <Ellipse Grid.ColumnSpan="3" Grid.RowSpan="3" Margin="1,1,1,1" Stroke="#FF8C8C8C">
                                <Ellipse.Fill>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#FF343434" Offset="0.63"/>
                                        <GradientStop Color="#FFFFFFFF" Offset="0.158"/>
                                        <GradientStop Color="#FFB3B3B3" Offset="1"/>
                                        <GradientStop Color="#FFE0E0E0" Offset="0"/>
                                    </LinearGradientBrush>
                                </Ellipse.Fill>
                            </Ellipse>
                            <Grid Grid.Column="1" Grid.ColumnSpan="1" Grid.Row="1" Grid.RowSpan="1">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="0.033*"/>
                                    <RowDefinition Height="0.6*"/>
                                    <RowDefinition Height="0.367*"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="0.114*"/>
                                    <ColumnDefinition Width="0.772*"/>
                                    <ColumnDefinition Width="0.114*"/>
                                </Grid.ColumnDefinitions>
                                <Ellipse StrokeThickness="2" VerticalAlignment="Stretch" Grid.ColumnSpan="3" Grid.RowSpan="3" x:Name="ellipse" Fill="{TemplateBinding Background}">
                                    <Ellipse.Stroke>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="#FF6A6A6A" Offset="0"/>
                                            <GradientStop Color="#FFFFFFFF" Offset="0.482"/>
                                            <GradientStop Color="#FF515151" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Ellipse.Stroke>
                                </Ellipse>
                                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Grid.ColumnSpan="3" Grid.RowSpan="3"/>
                                <Ellipse Stroke="#FF000000" StrokeThickness="0" HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" Width="Auto" Height="Auto" Grid.Column="1" Grid.Row="1" x:Name="ellipse1">
                                    <Ellipse.Fill>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="#D8FFFFFF" Offset="0"/>
                                            <GradientStop Color="#15FFFFFF" Offset="0.845"/>
                                        </LinearGradientBrush>
                                    </Ellipse.Fill>
                                </Ellipse>
                            </Grid>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="FontSize" Value="18.667"/>
        </Style>
    </UserControl.Resources>
    <Canvas x:Name="canvas" Height="100" Width="100" Margin="5"  >
        <Canvas IsManipulationEnabled="True" ManipulationDelta="UserControl_ManipulationDelta" ManipulationStarting="canvas_ManipulationStarting" ManipulationCompleted="Canvas_ManipulationCompleted">
            <Path x:Name="radarScreen" Data="M669.5,335 C669.5,519.73925 519.73925,669.5 335,669.5 C150.26075,669.5 0.5,519.73925 0.5,335 C0.5,150.26075 150.26075,0.5 335,0.5 C519.73925,0.5 669.5,150.26075 669.5,335 z" Stretch="Fill" Stroke="#FFEFEFEF" RenderTransformOrigin="0.5,0.5" Margin="0" HorizontalAlignment="Center" VerticalAlignment="Center" Width="{Binding ActualWidth, ElementName=canvas}" Height="{Binding ActualHeight, ElementName=canvas}" StrokeThickness="0">
                <Path.Fill>
                    <RadialGradientBrush SpreadMethod="Repeat" RadiusY="0.165" RadiusX="0.165">
                        <GradientStop Color="#FF14B269" Offset="0.036"/>
                        <GradientStop Color="#FF436053" Offset="1"/>
                        <GradientStop Color="#FFDEE4E9"/>
                    </RadialGradientBrush>
                </Path.Fill>
            </Path>
            <local:Divider Height="2.564" Canvas.Left="1.682" Canvas.Top="50" Width="96.764"/>
            <local:Divider Height="2.564" Canvas.Left="2.183" Canvas.Top="48.831" Width="96.764" RenderTransformOrigin="0.5,0.5">
                <local:Divider.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform Angle="90"/>
                        <TranslateTransform/>
                    </TransformGroup>
                </local:Divider.RenderTransform>
            </local:Divider>
            <local:Divider Height="2.564" Canvas.Left="1.423" Canvas.Top="49.24" Width="96.764" RenderTransformOrigin="0.5,0.5">
                <local:Divider.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform Angle="45"/>
                        <TranslateTransform/>
                    </TransformGroup>
                </local:Divider.RenderTransform>
            </local:Divider>
            <local:Divider Height="2.564" Canvas.Left="2.373" Canvas.Top="49.81" Width="96.764" RenderTransformOrigin="0.5,0.5">
                <local:Divider.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform Angle="135"/>
                        <TranslateTransform/>
                    </TransformGroup>
                </local:Divider.RenderTransform>
            </local:Divider>
            <ed:Arc x:Name="radarSweep" ArcThickness="1" 
			ArcThicknessUnit="Percent" 
			EndAngle="23" 
			Stretch="None" 
			StrokeThickness="0" 
			StartAngle="-22" Width="{Binding ActualWidth, ElementName=canvas}" Height="{Binding ActualHeight, ElementName=canvas}" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" VerticalAlignment="Top">
                <ed:Arc.Fill>
                    <SolidColorBrush Color="#FF36D046" Opacity="0.38"/>
                </ed:Arc.Fill>
                <ed:Arc.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform x:Name="sweepRotate"/>
                        <TranslateTransform/>
                    </TransformGroup>
                </ed:Arc.RenderTransform>
            </ed:Arc>
            <local:Drone Canvas.Left="37" Canvas.Top="37" Height="26" Width="26" x:Name="drone" IsManipulationEnabled="True" RenderTransformOrigin="0.5,0.5">
                <local:Drone.RenderTransform>
                    <MatrixTransform>
                    </MatrixTransform>
                </local:Drone.RenderTransform>
            </local:Drone>
        </Canvas>
        <Button Name="buttonUp" Canvas.Left="38" Canvas.Top="-4" Width="24" Height="24" Style="{StaticResource ButtonStyle1}" Background="{StaticResource Orange_BACKGROUND}" Click="buttonUp_Click" Visibility="Hidden">
            <ed:BlockArrow Fill="#FFF4F4F5" Orientation="Up" Stroke="Black" Width="10" Height="10" StrokeThickness=".5"/>
        </Button>
        <Button Name="buttonLeft" Canvas.Left="-5" Canvas.Top="39" Width="24"  Height="24" Style="{StaticResource ButtonStyle1}" Background="{StaticResource Orange_BACKGROUND}" Visibility="Hidden">
            <ed:BlockArrow Fill="#FFF4F4F5" Height="10" Orientation="Left" Stroke="Black" StrokeThickness=".5" Width="10" />
        </Button>
        <Button Name="buttonDown" Canvas.Left="38" Canvas.Top="80" Width="24"  Height="24" Style="{StaticResource ButtonStyle1}" Background="{StaticResource Orange_BACKGROUND}" Visibility="Hidden">
            <ed:BlockArrow Fill="#FFF4F4F5" Height="10" Orientation="Down" Stroke="Black" StrokeThickness=".5" Width="10" />
        </Button>
        <Button Name="buttonRight" Canvas.Left="81" Canvas.Top="39" Width="24"  Height="24" Style="{StaticResource ButtonStyle1}" Background="{StaticResource Orange_BACKGROUND}" Visibility="Hidden">
            <ed:BlockArrow Fill="#FFF4F4F5" Height="10" Orientation="Right" Stroke="Black" StrokeThickness=".5" Width="10" />
        </Button>
    </Canvas>

</UserControl>